import React from 'react';
import { 
  StyleSheet,
  Alert,
  Text,
  TouchableOpacity,
  TextInput,
  View,
  Platform,
  DeviceEventEmitter
} from 'react-native';
import { Icon } from 'react-native-vector-icons'; 
import { inject, observer } from 'mobx-react';
import Toast from 'react-native-root-toast';

@inject((stores) => {
    return {
      myStore: stores.rootStore.myStore,
      loginStore: stores.rootStore.loginStore
    }
  })
@observer  class UserInfoScreen extends React.Component {
    static navigationOptions = {
        title: '个人信息',
        headerBackTitle: '返回',
        
    };
    constructor(props){
        super(props);
        this.state = { 
            // oldMobile:'',
            mobile:'',
            sms_code:'',
            getCode: false,
            codeTxt: '获取验证码',
            getCode: false,
            count: 59,
            intel: null
        } 
	}
    componentWillUnmount() {
        DeviceEventEmitter.emit('My', {id: 1});
	};
     /**
     * 获取验证码
     */
    _getCode = () => {
        if(this.state.getCode){return;}
        if(this.state.mobile === ''){
            Alert.alert(
                '获取验证码失败',
                '手机号码不能为空',
                [
                  { text: '关闭' }
                ],
                { cancelable: false }
              )
            return;
        }
        const params = {
            type:'change_mobile',
            mobile:this.state.mobile
        }
        this.props.loginStore.getCode(params);
        this.setState({
            getCode: true,
            codeTxt: '60秒后重新获取'
        });
        const _this = this;
        const intel = setInterval(()=>{
            if(_this.state.count === 0){
                clearInterval(_this.state.intel);
                _this.setState({
                    codeTxt:`获取验证码`,
                    count: 59,
                    getCode: false,
                    intel: null
                })
                return;
            }
            this.setState({
                codeTxt:`${this.state.count}秒后重新获取`,
                count: this.state.count - 1
            })
        },1000);
        this.setState({
            intel
        })
    }
    /**
     * 修改手机
     */
    _onConfirm = () => {
        if(this.state.mobile === '' || this.state.sms_code === ''){
            Alert.alert(
                '保存失败',
                '新手机号,验证码不能为空',
                [
                  { text: '关闭' }
                ],
                { cancelable: false }
              )
            return;
        }
        this.props.myStore.changeMobile({
            mobile: this.state.mobile,
            sms_code: this.state.sms_code
        }, () => {
            Toast.show('保存成功',{
                duration: Toast.durations.LONG,
                position: Toast.positions.CENTER,
                shadow: true,
                animation: true,
                hideOnPress: true,
                delay: 10
            });
            this.props.navigation.navigate('Login');
        })
    }
    render() {
        const { navigate } = this.props.navigation;  //获取navigation的navigate方法
        return (
            <View style={styles.container}> 
                <View style={styles.titleTxt}>
                    <Text style={styles.c1}>*</Text>
                    <Text style={styles.titleC2}>更换手机号码</Text>
                </View>
                <View style={styles.formBox}>
                    {/* <View style={[styles.formItem,styles.formUserItem]}>
                        <View style={styles.formLabel}>
                            <Icon.AntDesign style={styles.labelIco} name='idcard'></Icon.AntDesign>
                            <Text>旧手机号</Text>
                        </View>
                        <TextInput
                            style={styles.formUser}
                            placeholder='请输入旧手机号'
                            onChangeText={(text) => this.setState({oldMobile: text})}
                            value={this.state.oldMobile}
                        />
                    </View> */}
                    <View style={[styles.formItem,styles.formPswItem]}> 
                        <View style={styles.formLabel}>
                            <Icon.FontAwesome style={styles.labelIco} name='mobile'></Icon.FontAwesome>
                            <Text>新手机号码</Text>
                        </View>
                        <TextInput
                            style={styles.formPsw}
                            placeholder='请输入手机号'
                            onChangeText={(text) => this.setState({mobile: text})}
                            value={this.state.mobile}
                        /> 
                    </View>
                    <View style={[styles.formItem,styles.formCodeItem]}>
                        <Text style={styles.formLabel}>验证码</Text>
                        <TextInput
                            style={styles.formCode}
                            placeholder='请输入验证码'
                            onChangeText={(text) => this.setState({sms_code: text})}
                            value={this.state.sms_code}
                        />
                        <TouchableOpacity onPress={this._getCode}>
                            <Text style={styles.getCode}>{this.state.codeTxt}</Text>
                        </TouchableOpacity>
                    </View> 
                    <TouchableOpacity onPress={this._onConfirm}>
                        <View style={styles.btnLogin}><Text style={styles.btnTxt}>确定</Text></View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({ 
    titleTxt:{
        marginTop: 10,
        marginBottom: 15,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft: 17,
        position: 'relative',
    },
    c1:{ 
        color:'#FF7F4B',
        fontSize: 34,
        position: 'absolute',
        top: '50%',
        marginTop:-14
    },
    titleC2:{ 
        color:'#101010',
        fontSize: 14,
        alignItems:'center',
        height:36,
        lineHeight:36
    },
    formBox:{
        paddingLeft: 10,
        paddingRight: 10,
    },
    formItem:{
        borderBottomColor:'#cccccc',
        borderBottomWidth: 1,
        height:48,
        width: '100%',
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row', 
        paddingLeft: 125
    },
    formPswItem:{
        paddingRight: 45
    },
    formLabel:{
        color:'#111111',
        fontSize: 16,
        lineHeight: 45,
        width: 125,
        marginLeft: -125,
        textAlign:'left',
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems: 'center',
    },
    formCodeItem:{
        paddingRight: 80
    },
    formUser:{
        width: '100%'
    },
    formPsw:{
        width: '100%'
    },
    formCode:{
        width: '100%'
    },
    formIcon:{
        width:45,
        lineHeight: 45,
        fontSize: 16,
        textAlign:'right'
    },
    getCode:{
        fontSize: 14,
        color:'#FF7F4B',
        lineHeight: 45
    },
    btnLogin:{
        width: 350,
        height: 40,
        backgroundColor:'#FF7F4B',
        borderRadius: 8,
        marginTop:20,
        marginLeft:'auto',
        marginRight:'auto'
    },
    btnTxt:{
        color:'#FFFFFF',
        fontSize: 16,
        textAlign:'center',
        lineHeight: 40,
    },
    labelIco:{
        marginRight:5,
        color:'#FF7F4B',
        fontSize:15
    }
});
export default UserInfoScreen;